<template>
  <!-- 近七日消耗 -->
  <SectionContainer class="u-p30">
    <el-row
      type="flex"
      justify="space-between"
    >
      <SectionTitle>近七日消耗</SectionTitle>
      <el-select
        filterable
        size="medium"
        v-model="weekExpendMode"
        @change="weekExpendChange"
      >
        <el-option
          v-for="item of adxOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >{{item.name}}</el-option>
      </el-select>
    </el-row>
    <div
      style="height: 400px;"
      v-show="weekExpendData.length"
    >
      <ECharts
        v-if="weekExpendVisible"
        :options="weekExpendOptions"
        :auto-resize="true"
      ></ECharts>
    </div>
  </SectionContainer>
</template>

<script>
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";

import SectionTitle from "@/components/section-title";
import SectionContainer from "@/components/section-container";

import { fetchAdxSelect, fetchHomeWeekExpend } from "@/api";

export default {
  components: {
    ECharts,
    SectionTitle,
    SectionContainer
  },
  data() {
    return {
      adxOptions: [],
      weekExpendData: [],
      weekExpendMode: "",
      weekExpendVisible: true
    };
  },
  computed: {
    weekExpendOptions() {
      return {
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            return `${params[0].axisValue}：<span style="color: ${params[0].color}">${params[0].value}元</span>`;
          },
          extraCssText:
            "background: #fff; padding: 10px; color: #606266; box-shadow: 2px 3px 3px rgba(230, 231, 239, 0.7), -2px -1px 3px rgba(230, 231, 239, 0.7);"
        },
        color: ["#33b8ff"],
        grid: {
          top: "30",
          left: "30",
          right: "50",
          bottom: "0",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#e9e9e9"
              }
            },
            axisLabel: {
              color: "#747474"
            },
            boundaryGap: false,
            data: this.weekExpendData.map(item => item.reportTime)
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} 元",
              color: "#747474"
            },
            axisLine: {
              lineStyle: {
                color: "#e9e9e9"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#e9e9e9"
              }
            }
          }
        ],
        series: [
          {
            type: "line",
            smooth: true,
            itemStyle: { normal: { areaStyle: { type: "default" } } },
            data: this.weekExpendData.map(item => item.biddingCost)
          }
        ]
      };
    }
  },
  methods: {
    // adx
    fetchAdxSelect() {
      fetchAdxSelect({
        query: {
          unionId: 0
        }
      }).then(res => {
        this.adxOptions = [
          {
            name: "全部adx",
            id: ""
          }
        ].concat(res.data.list);
      });
    },
    // 近七日数据
    fetchHomeWeekExpend(unionId = "") {
      this.weekExpendVisible = false;
      fetchHomeWeekExpend({
        query: {
          unionId: Number(unionId)
        }
      }).then(res => {
        this.weekExpendData = res.data;
        this.weekExpendVisible = true;
      });
    },
    // 近七日数据切换
    weekExpendChange(id) {
      this.fetchHomeWeekExpend(id);
    }
  },
  created() {
    this.fetchAdxSelect();
    this.fetchHomeWeekExpend();
  }
};
</script>

<style scoped>
.echarts {
  width: 100%;
}
</style>